<template>
	<view style="background-color: #FDDEA6;">
		<!-- 查看详情 -->
		<image src="/static/images/拼团-详情.png" style="width: 100%;height: 38vh;"></image>
		<view class="whole">
			<view class="top">
				活动名称
			</view>
			<view style="font-weight: 600;font-size: 30rpx;color: #6B5A43;margin-top: 40rpx;">
				<text style="font-weight: 600;color: #6B5A43;">拼团成功</text>
			</view>
			<view style="color: #8288ED;font-size: 90rpx;font-weight: 600;">
				6
			</view>
			<view style="width: 90%;margin-left: 5%;margin-top: 20rpx;">
				<ai-progress :percentage="66" bg-color="#F54F3B" :stroke-width="25" :noData="true"></ai-progress>
			</view>
			<view class="but">
				商品金额:128.00
			</view>
		</view>
		<view class="list">
			<view class="list_top">
				<text style="font-weight: 600;font-size: 40rpx;margin-left: 8%;color: #C93708;">拼团记录</text>
			</view>
			<view class="list_li" v-for="(item,index) in list">
				<image :lazy-load="true" class="img"
					:src="item.img" mode=""></image>
				<view class="list_li_text">
					<text style="color: #765F1D;">{{item.name}}</text>
					<text style="color: #C93708;font-weight: 600;margin-left: 35%;">{{item.title}}</text>
					<text style="color: #836E31;margin-left: 2%;">({{item.num}}人团)</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{img:'http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg',name:'快乐生活',title:'发起拼团',num:6},
					{img:'http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg',name:'快乐生活',title:'已拼团',num:5},
					{img:'http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg',name:'快乐生活',title:'已拼团',num:4},
					{img:'http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg',name:'快乐生活',title:'已拼团',num:3},
					{img:'http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg',name:'快乐生活',title:'已拼团',num:2},
					{img:'http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg',name:'快乐生活',title:'已拼团',num:1},
					{img:'http://i0.hdslb.com/bfs/article/1807ab7c0533474539df628039eec2a1348d9953.jpg',name:'快乐生活',title:'已拼团',num:0}
				]
			}
		},
		methods: {
		
		}
	}
</script>

<style scoped>
	.top {
		line-height: 50rpx;
		text-align: center;
		border-radius: 0 0 10rpx 10rpx;
		width: 263rpx;
		height: 50rpx;
		background-color: #fff;
		margin-left: 32%;
		color: #007AFF;
		font-size: 25rpx;
	}

	.add {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 95rpx;
	}

	.cancel {
		margin-left: 90%;
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		position: absolute;
		left: 28rpx;
		top: -24rpx;
		background-color: #FFF;
	}

	.user_img {
		margin-left: 40%;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		background-color: #02C4C7;
		margin-top: -60rpx;
	}

	.pop {
		width: 634rpx;
		height: 40vh;
		background-color: #fff;
		border-radius: 120rpx;
		text-align: center;
	}

	.uni-popup .uni-popup__wrapper {
		border-radius: 60rpx;
	}

	.list_li_text {
		width: 81%;
		margin-top: 45rpx;
		margin-left: 3%;
	}

	.list_li {
		height: 10vh;
		display: flex;
	}

	.img {
		width: 80rpx;
		height: 80rpx;
		background-color: #d2d2d2;
		margin-left: 5%;
		margin-top: 3%;
		border-radius: 50rpx;
	}

	.list_top {
		width: 100%;
		height: 8vh;
		background-color: #e7c68f;
		border-radius: 20rpx 20rpx 0 0;
		line-height: 8vh;
	}

	.list {
		width: 95%;
		margin-left: 3%;
		height: auto;
		background-color: #FFF9EB;
		margin-top: 10rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.but {
		width: 90%;
		border-radius: 50rpx;
		margin-top: 40rpx;
		margin-left: 5%;
		color: #6B5A43;
		font-weight: 600;
	}

	.whole {
		width: 95%;
		height: 40vh;
		background-color: #FFFAEE;
		margin-left: 3%;
		border-radius: 10rpx;
		text-align: center;
	}
</style>
